<template>
    <div>
        <div style="margin: 10px 0">
            <el-form :model="pagequery" ref="queryForm" size="small" :inline="true" label-width="68px">
                <el-form-item label="系统模块" prop="title">
                    <el-input
                            v-model="pagequery.title"
                            placeholder="请输入系统模块"
                            clearable
                            style="width: 240px;"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="操作人员" prop="operName">
                    <el-input
                            v-model="pagequery.operName"
                            placeholder="请输入操作人员"
                            clearable
                            style="width: 240px;"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="操作类型" prop="businessType">
                    <el-select
                            v-model="pagequery.businessType"
                            placeholder="操作类型"
                            clearable
                            style="width: 240px"
                    >
                        <el-option
                                v-for="dict in dict.type.sys_oper_type"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select
                            v-model="pagequery.status"
                            placeholder="操作状态"
                            clearable
                            style="width: 240px"
                    >
                        <el-option
                                v-for="dict in dict.type.sys_common_status"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="操作时间">
                    <el-date-picker
                            v-model="dateRange"
                            style="width: 240px"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="dateFormat"
                            :default-time="['00:00:00', '23:59:59']"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="load">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div style="margin: 10px 0">
            <el-popconfirm
                    class="ml-5"
                    confirm-button-text='确定'
                    cancel-button-text='我再想想'
                    icon="el-icon-info"
                    icon-color="red"
                    title="您确定批量删除这些数据吗？"
                    @confirm="handleDelete"
            >
                <el-button style="margin: 0 5px" size="mini" icon="el-icon-delete" type="danger" plain slot="reference">批量删除</el-button>
            </el-popconfirm>
            <el-popconfirm
                    confirm-button-text='确定'
                    cancel-button-text='我再想想'
                    icon="el-icon-info"
                    icon-color="red"
                    title="您确定清空数据吗？"
                    @confirm="handleDeleteAll"
            >
                <el-button style="margin: 0 5px" size="mini" icon="el-icon-delete" type="danger" plain slot="reference">清空</el-button>
            </el-popconfirm>
        </div>

        <el-table ref="tables" border stripe v-loading="loading" :data="tableData"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center"/>
            <el-table-column label="日志编号" align="center" prop="id"/>
            <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true"/>
            <el-table-column label="操作类型" align="center" prop="businessType">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.sys_oper_type" :value="scope.row.businessType"/>
                </template>
            </el-table-column>
            <el-table-column label="操作人员" align="center" prop="operName" width="110" :show-overflow-tooltip="true"
                             sortable="custom" :sort-orders="['descending', 'ascending']"/>
            <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true"/>
            <el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true"/>
            <el-table-column label="操作状态" align="center" prop="status">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status==0">成功</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.status==1">失败</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作日期" align="center" prop="operTime" width="160" sortable="custom"
                             :sort-orders="['descending', 'ascending']">
                <template slot-scope="scope">
                    <span>{{ scope.row.operTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true"
                             sortable="custom" :sort-orders="['descending', 'ascending']">
                <template slot-scope="scope">
                    <span>{{ scope.row.costTime }}毫秒</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-view"
                            @click="handleView(scope.row,scope.index)"
                    >详细
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagequery.pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pagequery.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!-- 操作日志详细 -->
        <el-dialog title="操作日志详细" :visible.sync="open" width="700px" append-to-body>
            <el-form ref="form" :model="form" label-width="100px" size="mini">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="操作模块：">{{ form.title }}</el-form-item>
                        <el-form-item
                                label="登录信息："
                        >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
                        <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.status===0">
                        <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="操作状态：">
                            <div v-if="form.status === 0">正常</div>
                            <div v-else-if="form.status === 1">失败</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="消耗时间：">{{ form.costTime }}毫秒</el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="操作时间：">{{ form.operTime }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="open = false">关 闭</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import * as operlogApi from '@/api/system/log/operlog'
    import {delOperlogById} from "@/api/system/log/operlog";
    import * as loginlogAPI from "@/api/system/log/logininfo";

    export default {
        name: "Role",
        dicts:['sys_oper_type','sys_common_status'],
        data() {
            return {
                // 遮罩层
                loading: true,
                dateRange: '',
                // 是否显示弹出层
                open: false,
                tableData: [],
                total: 0,
                pagequery: {  //分页查询条件
                    pageNum: 1,
                    pageSize: 10,
                },
                form: {},
                ids:[],
            }
        },
        methods: {
            load() {
                this.loading = true;
                operlogApi.getOperlogsPage(this.pagequery).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total
                    this.loading = false;
                })
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const operlogIds =  row?.id || this.ids;
                if(operlogIds.length<=0){
                    this.$message.warning("请选择删除的日志")
                    return
                }
                delOperlogById(operlogIds).then(res => {
                    if (res.code===200) {
                        this.$message.success("删除成功")
                        this.load();
                    }
                })
            },
            handleDeleteAll(){
                operlogApi.delAllOperlog().then(res=>{
                    if(res.code===200){
                        this.load()
                        this.$message.success("清空"+res.data+"条操作日志")
                    }
                })
            },
            /** 详细按钮操作 */
            handleView(row) {
                this.open = true;
                this.form = row;
            },
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
            },
            reset() {
                this.pagequery = {  //分页查询条件
                    pageNum: 1,
                    pageSize: 10,
                }
                this.dateRange = ''
                this.load()
            },
            handleSizeChange(pageSize) {
                this.pagequery.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                this.pagequery.pageNum = pageNum
                this.load()
            },
            //获取时间区间方法
            dateFormat(picker) {
                this.pagequery.startTime = picker[0]
                this.pagequery.endTime = picker[1]
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.load();
            },
        },
        created() {
            this.load()
        },
    }
</script>


<style>

</style>
